<!--
 * @Author: Bonnie
 * @Date: 2021-09-01 15:19:47
 * @LastEditTime: 2021-09-01 15:53:55
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /custom/src/views/Puzzle.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
// 拖拽拼图验证
<template>
  <div>
    "Puzzle"
    <div class="login-box">
      <button @click="handleClick">拼图形滑块</button>
      <div class="puzzle-box">
        <PuzzleVerification
          v-model="isShow"
          width="300"
          height="200"
          :puzzleImgList="puzzleImgList"
          blockType="square"
          :onSuccess="handleSuccess"
        />
      </div>
    </div>
  </div>
</template>
<script>
import PuzzleVerification from "vue-puzzle-verification";
export default {
  name: "Puzzle",
  components: { PuzzleVerification },
  data() {
    return {
      isShow: false,
      puzzleImgList: [
        "https://img.chinasongzhuang.cn/uploadimg/image/20200219/20200219180104_83804.jpg"
      ]
    };
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow;
    },
    handleSuccess() {
      this.$message.success("验证成功，即将进行下一步。");
    }
  }
};
</script>
<style lang='scss' scoped>
</style>